<template>
  <div class="list">
    <!-- 头部信息 -->
    <Header />
    <van-tree-select
      height="100vh"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="goSearchShop"
    >
      <template #content>
        <!-- <van-image
          v-if="active === 0"
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
        />
        <van-image
          v-if="active === 1"
          src="https://img01.yzcdn.cn/vant/apple-2.jpg"
        /> -->
        <div class="rightContant" v-if="active === 0">
          <ul ref="shopContant">
            <!-- <div class="rightTtitle">{{ item.shopName }}</div> -->
            <ul>
              <!-- 这是商品推荐的数据 -->
              <!-- 将后端将商品计算再回显给前端 -->
              <li
                class="gather"
                v-for="(item, index) in recommData"
                @click="goData(item.good_id)"
                :key="index"
              >
                <div>
                  <img :src="item.shopImgUrl" />
                </div>
                <div class="distance">
                  <div class="shopName">{{ item.shopName }}</div>
                  <div class="saleGood">
                    <!-- <span>库存{{ item.monthNum }}份</span> -->
                    <span>剩余{{ item.monthNum }}份</span>
                  </div>
                  <div class="price">
                    <span>￥{{ item.price }}</span>
                  </div>
                </div>
              </li>
              <div style="height: 1px"></div>
            </ul>
          </ul>
        </div>

        <div class="items" v-for="(item, index) in items" :key="index">
          <div class="rightContant" v-if="active === index">
            <ul ref="shopContant">
              <!-- <li
                class="eventList"
                v-for="(item, index) in shopItem"
                :key="index"
              > -->
              <li class="eventList">
                <!-- <div class="rightTtitle">{{ item.shopName }}</div> -->
                <ul>
                  <li
                    class="gather"
                    v-for="(item, index) in shopItem"
                    :key="index"
                    @click="goData(item.good_id)"
                  >
                    <div>
                      <img :src="item.shopImgUrl" />
                    </div>
                    <div class="distance">
                      <div class="shopName">{{ item.shopName }}</div>
                      <div class="saleGood">
                        <!-- <span>库存{{ item.monthNum }}份</span> -->
                        <span>剩余{{ item.monthNum }}份</span>
                      </div>
                      <div class="price">
                        <span>￥{{ item.price }}</span>
                      </div>
                    </div>
                  </li>
                  <div style="height: 1px"></div>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import Header from "@/components/shoplist/Header.vue"
export default {
  // 获取分类数据
  created() {
    // 获取商品左侧数据
    this.getLeftData()

    // 获取商品右侧数据
    this.getShopList()

    // 初始化界面获取数据
    // this.getInitiazayion()
  },

  components: {
    Header,
  },

  data() {
    return {
      active: 0,
      // 左侧数据
      items: [],
      shopItem: [],
      init: [],
      shopList: [],
      recommData: [],
      value: null,
    }
  },

  methods: {
    getShopList() {
      this.$api.list.listData().then((res) => {
        console.log(res)
        const { recommData, reslut } = res.data
        this.shopList = reslut
        if (recommData.length == 0) {
          this.recommData = reslut
        } else {
          this.recommData = recommData
        }

        console.log(this.recommData)
        // this.shopList = res.data
      })
    },
    goData(id) {
      console.log(id)

      this.$router.push({
        path: "/goodsdetaillist",
        query: {
          id,
        },
      })
    },
    getLeftData() {
      this.$api.uploadcommoditiesd.getPicker().then((res) => {
        console.log(res)
        this.items = res.data
      })
    },

    goSearchShop(id) {
      console.log(this.items[id])
      let topic_id = this.items[id].topic_id

      let arr = this.shopList.filter((item) => {
        return item.topic_id == topic_id
      })

      this.shopItem = arr
      console.log(arr)
    },

    // 初始化界面
    getInitiazayion() {
      this.$api.list.getInit().then((res) => {
        console.log(res)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.rightTtitle {
  /* 右侧标题样式 */
  padding-left: 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  font-weight: bold;
  color: rgb(147, 153, 159);
  background: rgb(248, 248, 248);
  margin: 0;
}

.gather {
  /* 右侧每一个商品的样式 */
  display: flex;
  margin: 16px;
  display: flex;
  align-items: center;
}

.distance {
  /* 右侧图片与描述间距 */
  padding-left: 6px;
}

.gather img {
  /* 右侧图片样式 */
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

:last-child {
  /* 点击左侧导航右侧内容与左边对齐 */
  margin-bottom: 0;
}

.shopName {
  /* 右侧商品标题字体大小 */
  font-size: 14px;
}

.saleGood {
  /* 右侧月售好评样式 */
  font-size: 10px;
  color: rgb(147, 153, 159);
  padding: 4px 0px;
}

.saleGood span:first-child {
  /* 月售样式 */
  padding-right: 10px;
}

.price {
  /* 价格样式 */
  font-weight: bold;
  font-size: 14px;
  color: rgb(255, 94, 121);
}
</style>
